About portfolYOU

Star Fork Download

portfolYOU is a free modern open-source Jekyll portfolio and blogging theme that works with GitHub Pages.

Features

• Works 100% with GitHub Pages as a remote theme.
• Based on Bootstrap, FontAwesome & GitHub Buttons (use any of those libraries’ components anywhere in the project). Check dependencies for more info.
• Minimal design and Animations.
• Search articles by title, tags or even descriptions.
• Support all image orientations (landscape, portrait or square) as a header image.
• Set of shortcodes to include various elements.
• Skills Progress bars and Timeline.
• Responsive design.
• Attractive 404 page.
• Repository metadata.
• Well Documented.

Installation

As a GitHub Pages remote theme

1. Download portfolYOU as .zip from official repo then extract the files.
2. Delete unnecessary files and folders: README.md, LICENSE, docs/
3. Delete theme directories, as they will be included remotely : _includes/, _layouts/, _sass/, assets/
4. Delete Gemfile and .gitignore if you aren’t going to set up the theme locally.

5. Your directory structure should be looking something like this:

   your_site_name/
   ├── _data/
   │   ├── other-skills.yml
   │   ├── programming-skills.yml
   │   └── timeline.yml
   ├── _posts/
   │   ├── YYYY-MM-DD-article-1-name.md
   │   └── YYYY-MM-DD-article-2-name.md
   ├── _projects/
   │   ├── project-1.md
   │   └── project-2.md
   ├── pages/
   │   ├── about.md
   │   ├── articles.html
   │   └── projects.html
   ├── _config.yml
   ├── 404.html
   ├── index.html
   └── search.json
   

6. Add the following line to the build settings section of _config.yml:

   remote_theme: YoussefRaafatNasry/portfolYOU
   

   or to use a specific version:

   remote_theme: YoussefRaafatNasry/portfolYOU@v1.0.0
   

7. Replace baseurl: "/portfolYOU" with baseurl: "" if your are hosting the site at username.github.io directly.
8. Change other configuration options in _config.yml depending on your needs.
9. Set up portfolYOU locally or publish it to GitHub Pages.

As a Fork

1. Fork the repo.
2. Clone your fork.
3. Delete unwanted sections.
4. Modify and edit files’ contents upon your needs.
5. Change configuration options in _config.yml depending on your needs.
6. Commit and push changes to your fork.
7. Set up portfolYOU locally or publish it to GitHub Pages.

Sections

portfolYOU’s sections are independent, you can remove any section upon your needs. Here’s a list of the files and folders needed by each section:

If you are deleting any section, please consider the following:
¹ remove reference from _sass/portfolYOU.scss
² remove reference from _includes/scripts.html
³ remove collections and defaults from _config.yml
⁴ remove posts default permalink from _config.yml

Customization

When using portfolYOU as a theme means you can take advantage of the file overriding method. This allows you to overwrite any file in this theme with your own custom file, simply by matching the file name and path. The most common example of this would be if you want to add your own styles or change the favicon.
To change the favicon for example just generate your own using favicon or any other tool. Copy your new favicon.ico file into your own project with the same file path assets/favicon.ico.

Adding Content

Adding new Projects

1. Add project-name.md or project-name.html to _projects/.

2. Add front matter to the top of your new project file.

   ---
   name: Awesome Project
   tools: [Tool1, Tool2]
   image: image url or path here.
   description: Write project description here.
   ---
   

3. Add project body in markdown or html. Check available elements to enjoy extra customization.
4. Check more projects templates from here.

Adding new Article

1. Add YYYY-MM-DD-article-name.md to _posts/.

2. Add front matter to the top of your new article file.

   ---
   title: Awesome Title
   tags: [TAG 1, TAG 2]
   style: fill / border (choose one only)
   color: primary / secondary / success / danger / warning / info / light / dark (choose one only)
   description: Write article description here, if you left this empty the article description will be the first 25 words of the article body.
   ---
   

3. If you left both the style and color empty, the article’s style is set to default style.
4. Add article body in markdown or html. Check available elements to enjoy extra customization.
5. Check more articles templates from here.

Adding new Page

1. Add page-name.html or page-name.md to pages/, new subfolder or to root directory of your project.

2. Add front matter to the top of your new page.

   ---
   layout: default
   title: Page Name
   permalink: /page_permalink/ (the output path for the page)
   weight: 2 (the order of the page in the navigation bar)
   ---
   

3. The new page will be added to the navigation bar of your project.
4. Check more pages templates from here.

Adding External Project, Article or Page

If you want your project, article or even the page to refer to an external resource, google.com for example, just add the following attribute to your front matter.

---
external_url: https://google.com/
---

Adding new Skill

• Add the following lines to _data/programming-skills.yml or _data/other-skills.yml.

  - name: Awesome Skill
    percentage: 95
    color: secondary / success / danger / warning / info / light / dark (choose one only, primary is default color)
  

• To add a new Skills Category:

  1. Add category_name-skills.yml to _data/.
  2. Add skills to the file using the previously mentioned method.
  3. Open pages/about.md.

  4. Add the following lines to the skills section between <div class="row"> and </div>:

     {% include skills.html title="Category_Name Skills" source=site.data.category_name-skills %}
     

Adding new Timeline Item

Add the following lines to _data/timeline.yml.

- title: Awesome Item
  from: 2016
  to: 2018
  description: Write item description here.

Dependencies

Credits

1. Simple Jekyll Search.
2. pygments-css.
3. GitHub Buttons.
4. CSS3 Animated Skill Progress bar A pen by Shah Zobayer Ahmed.
5. How to Create Bootstrap Card Hover Effect (jQuery) A video by Daily Tuition.
6. Vertical Timeline (HTML-SCSS-CSS) A video by DevPen.
7. 404 svg animated page A pen by Vladimir Gashenko.